<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登录页</title>
		<link href="layui/css/layui.css" rel="stylesheet">
		<link href="layui/css/common.css" />
	</head>
	<body>
		<script src="layui/layui.js"></script>
		<div class="yz-main-bg"></div>
		<div class="yz-login-box">
			<div class="yz-login-box-content">
				<div class="yz-login-box-title">
					<img src="static/login/标题.png" />
				</div>
				<div class="yz-login-info">
					<div class="yz-login-form">
						<div class="yz-login-item">
							<div class="icon person"></div>
							<div class="input">
								<input class="input-hide" name="username" placeholder="用户名" />
							</div>
						</div>
						<div class="yz-login-item item-change">
							<div class="icon password"></div>
							<div class="input">
								<input class="input-hide" name="password" placeholder="密码" />
							</div>
						</div>
						<div class="yz-login-btn" id="login">
							<button class="login-btn-text">登录</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="yz-login-bottom"><span>技术支持：广州拓实科技有限公司</span></div>


		<script>
			layui.use(function() {
				var layer = layui.layer,$ = layui.jquery;
				$('#login').click(function(){
					window.location.href = "index.html"
				})
			});
		</script>
		<style>
			.yz-main-bg {
				background: url("static/login/底图.png") no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: -1;
			}

			.yz-login-box {
				width: 500px;
				margin: 0 auto;
			}

			.yz-login-box-content {
				margin-top: 10vh;
			}

			.yz-login-box-title {
				padding: 0 5vh;
				text-align: center;
			}

			.yz-login-box-title img {
				width: 100%;
			}

			.yz-login-info {
				position: relative;
				margin-top: 10vh;
				background: url("static/login/登录框.png") no-repeat;
				height: 420px;
				background-size: 100% 100%;
			}

			.yz-login-form {
				margin-top: 103px;
				position: absolute;
				width: 100%;

			}

			.yz-login-item {
				position: relative;
				margin-left: 100px;
			}

			.item-change {
				margin-top: 57px;
			}

			.yz-login-item .icon {
				width: 22px;
				height: 26px;
				position: relative;
				top: 15px;
			}

			.yz-login-item .person {
				background: url("static/login/download-1.png") no-repeat;
				background-size: 100% 100%;
			}

			.yz-login-item .password {
				background: url("static/login/密码.png") no-repeat;
				background-size: 100% 100%;
			}

			.yz-login-item .input-hide {
				padding: 8px;
				position: absolute;
				left: 45px;
				top: 1.5vh;
				width: 240px;
				border: 0;
				background: none !important;
				color: #fff;
			}

			.yz-login-item .input-hide::placeholder {
				color: #1eb2c3;
			}

			.yz-login-btn {
				text-align: center;
				width: 100%;
				margin-top: 100px;
				cursor: pointer;
			}

			.yz-login-btn .login-btn-text{
				font-size: 18px;
				border: none;
				color: #434949;
				background: none !important;
				font-weight: bolder;
				
			}

			.yz-login-bottom {
				position: absolute;
				bottom: 10px;
				width: 100%;
				text-align: center;
				font-size: 18px;
			}

			.yz-login-bottom span {
				color: #becacf;
				background: #285c6c;
				padding: 2px 6px;
			}
		</style>
	</body>
</html>